<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title langWord="t:Bonus_Point_List">Bonus Point List</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../resources/css/mui.css">
	<link rel="stylesheet" href="../../resources/css/style.css">
	<link rel="stylesheet" href="../../resources/css/user/register.css">
	<script src="../../resources/assets/mui.js"></script>
	<script src="../../resources/assets/avalon.js"></script>
	<script src="../../resources/assets/jquery-2.0.3.min.js"></script>
	<script src="../../resources/assets/jquery.cxselect.min.js"></script>
	<script src="../../resources/js/common.js"></script>
	<script src="../../resources/js/dahua.config.js"></script>
	<script src="../../resources/js/lang/en.js"></script>
	<!-- <script src="../../resources/js/user/register.js"></script> -->
	<script src="../../resources/js/integral/myPoints.js"></script>
	<style type="text/css">
		.mui-content>.mui-table-view:first-child{
			margin-top:-1px;
		}
		.mui-card{
			padding: 20px;
			margin: 0px 0px 10px 0px !important;
		}
		.mui-card-content{
			box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
			border-radius: 10px;
		}
		.mui-card-content-inner{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 25px;
		}
		.mui-card-content-inner label{
			color: #999;
		}
		.mui-card-content-inner span{
			font-size: 40px;
			line-height: 60px;
			font-weight: bold;
		}
		.mui-table-view-cell a{
			display: flex !important;
			align-items: center;
		}
		.mui-table-view-cell label{
			padding-right: 20px;
		}
		.mui-table-view-cell .my-content{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.mui-table-view-cell .my-title{
			color: black;
			line-height: 20px;
		}
		.mui-table-view-cell .my-subTitle{
			line-height: 25px;
		}
		.mui-table-view-cell .mui-color-blue,
		.mui-table-view-cell .mui-color-red{
			padding-right: 20px;
			font-size: 18px;
		}
		.mui-table-view-cell .mui-color-blue{
			color: #1cc221;
		}
		.mui-table-view-cell [data-val^='-'],
		.mui-table-view-cell .mui-color-red{
			color: #fd1616;
		}
		.mui-table-view-cell [data-status='2']{
			color: #ccc;
			position: relative;
		}
		.mui-table-view-cell [data-status='2']::before{
			content: '';
			border-bottom: red double 4px;
			display: block;
			position: absolute;
			left: -10px;
			top: 8px;
			width: 100%;
		}
	</style>
</head>

<body ms-controller="page" >
	<div id="regPage">
		<!--头部-->
		<header class="mui-bar mui-bar-nav header">
			<h1 id="title" class="mui-title" langWord="t:Bonus_Point_List">Bonus Point List</h1>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white login"></a>
			<a class="mui-icon mui-pull-right mui-icon-white home" href="../product/category.html">
				<i class="icon icon_home"></i>
			</a>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!-- <div class="mui-content-padded"> -->
					<form :validate="@validate" id="form" method="post">
						<input type="hidden" value="" id="uid" name="uid" />
						<div class="mui-card">
							<div class="mui-card-content">
								<div class="mui-card-content-inner">
									<label langWord="t:User_Center_Available_Points">可用积分</label>
									<span>{integralNum}</span>
								</div>
							</div>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" ms-for='(i,item) in @receipted' ms-attr="{'data-url':'./myPointsInfo.html?mid='+@item.id}">
								<a class="mui-navigate-right">
									<label>{i+1}</label>
									<p class="my-content">
										<span class="my-title">{item.createtime}</span>
										<span class="my-subTitle" ms-css="[!item.sn && {'display':'none'}]"><span langWord="t:jfxq_sn">SN</span>:{item.sn}</span>
										<span class="my-subTitle"><span langWord="t:jfxq_Date_of_Expiry"></span>:{item.validityTime}</span>
									</p>
									<!-- ms-class="@item.totalIntegral>=0?'mui-color-blue':'mui-color-red'" -->
									<span class="mui-color-blue" ms-attr="{'data-val':@item.totalIntegral,'data-status':@item.status}">
										{item.totalIntegral>=0?'+'+item.totalIntegral:''+item.totalIntegral}
									</span>
									<!-- <span class="mui-color-red" ms-if="@item.totalIntegral<0">-{item.totalIntegral}</span> -->
								</a>
							</li><!-- 
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									<label>2</label>
									<p class="my-content">
										<span class="my-title">2019/02/12 17:30</span>
										<span class="my-subTitle">Order:4111812040003</span>
									</p>
									<span class="mui-color-red">-192</span>
								</a>
							</li> -->
						</ul>
					</form>
				<!-- </div> -->
			</div>
		</div>
	</div>

	<!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item" href="../product/category.html">
				<span class="mui-icon icon icon_product"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item" href="../solution/category.html">
				<span class="mui-icon icon icon_solution"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="../partner/index.html">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item mui-active" href="user.html">
				<span class="mui-icon icon icon_usercenter active"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
-->
</body>

</html>
